<template>
  <view>
    <uni-card class="card" :is-shadow="false" is-full>
      <text class="left">承受价格</text>
      <text class="right">{{
        detail.priceIfNegotiate == 1
          ? "面议"
          : detail.price
          ? detail.price + detail.priceUnit
          : "暂无"
      }}</text>
    </uni-card>
    <uni-card class="card" :is-shadow="false" is-full>
      <text class="left">发布时间</text>
      <text class="right">{{
        detail.publishTime ? detail.publishTime : "暂无"
      }}</text>
    </uni-card>
    <uni-card class="card" :is-shadow="false" is-full>
      <text class="left">项目编号</text>
      <text class="right">{{
        detail.projectNo ? detail.projectNo : "暂无"
      }}</text>
    </uni-card>
    <uni-card class="card" :is-shadow="false" is-full>
      <text class="left">面积</text>
      <text class="right">{{ detail.landArea + detail.landAreaUnit }}</text>
    </uni-card>
    <view style="margin-top: 20px">
      <!-- <uni-segmented-control
        :current="current"
        :values="items"
        @clickItem="onClickItem"
        styleType="text"
      ></uni-segmented-control> -->
      <view
        style="
          height: 80rpx;
          display: flex;
          width: 100%;
          justify-content: space-around;
          align-items: center;
        "
      >
        <view
          style="
            height: 60rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 27%;
            font-size: 28rpx;
          "
          @click="onClickItem(0)"
          :style="{
            'border-bottom':
              current == 0 ? '2px solid rgb(41, 121, 255)' : '2px solid white',
            color: current == 0 ? 'rgb(41, 121, 255)' : '',
          }"
          >需求方信息</view
        >
        <view style="border-left: 1px solid #000000; height: 50rpx"></view>
        <view
          style="
            height: 60rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 27%;
            font-size: 28rpx;
          "
          @click="onClickItem(1)"
          :style="{
            'border-bottom':
              current == 1 ? '2px solid rgb(41, 121, 255)' : '2px solid white',
            color: current == 1 ? 'rgb(41, 121, 255)' : '',
          }"
          >项目信息</view
        >
      </view>
      <view class="content">
        <view v-show="current === 0" style="margin-top: 20px">
          <uni-card class="card" :is-shadow="false" is-full>
            <text class="left">需求类型</text>
            <text class="right">{{
              detail.projectModel ? detail.projectModel : "暂无"
            }}</text>
          </uni-card>
          <uni-card class="card" :is-shadow="false" is-full>
            <text class="left">名称</text>
            <text class="right">{{
              detail.demandName ? detail.demandName : "暂无"
            }}</text>
          </uni-card>
          <uni-card class="card" :is-shadow="false" is-full>
            <text class="left">需求方电话</text>
            <text class="right">{{ formatPhone }}</text>
          </uni-card>
          <uni-card class="card" :is-shadow="false" is-full>
            <text class="left">标的类型</text>
            <text class="right">{{
              detail.objective ? detail.objective : "暂无"
            }}</text>
          </uni-card>
          <uni-card class="card" :is-shadow="false" is-full>
            <text class="left">地址</text>
            <text class="right">{{
              detail.demandAddress ? detail.demandAddress : "暂无"
            }}</text>
          </uni-card>
          <uni-card class="card" :is-shadow="false" is-full>
            <text class="left">法定代表人</text>
            <text class="right">{{
              detail.legal ? detail.legal : "暂无"
            }}</text>
          </uni-card>
          <uni-card class="card" :is-shadow="false" is-full>
            <text class="left">联系人</text>
            <text class="right">{{
              detail.contact ? detail.contact : "暂无"
            }}</text>
          </uni-card>
          <uni-card class="card" :is-shadow="false" is-full>
            <text class="left">联系人电话</text>
            <text class="right">{{ formatContactPhone }}</text>
          </uni-card>
        </view>
        <view v-show="current === 1" style="margin-top: 20px">
          <uni-card class="card" :is-shadow="false" is-full>
            <text class="left">项目名称</text>
            <text class="right">{{
              detail.projectName ? detail.projectName : "暂无"
            }}</text>
          </uni-card>
          <uni-card class="card" :is-shadow="false" is-full>
            <text class="left">项目编号</text>
            <text class="right">{{
              detail.projectNo ? detail.projectNo : "暂无"
            }}</text>
          </uni-card>
          <uni-card class="card" :is-shadow="false" is-full>
            <text class="left">位置区域</text>
            <text class="right">{{ detail.area ? detail.area : "暂无" }}</text>
          </uni-card>
          <uni-card class="card" :is-shadow="false" is-full>
            <text class="left">承受价格</text>
            <text class="right">{{ detail.price + detail.priceUnit }}</text>
          </uni-card>
          <uni-card class="card" :is-shadow="false" is-full>
            <text class="left">转入用途</text>
            <text class="right">{{
              detail.shiftPurpose ? detail.shiftPurpose : "暂无"
            }}</text>
          </uni-card>
          <uni-card class="card" :is-shadow="false" is-full>
            <text>项目简介</text>
            <view class="test-rich">
              <rich-text :nodes="detail.introduction"></rich-text>
            </view>
          </uni-card>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
import { demandProject } from "@/utils/api.js";
import { decryptPhone } from "@/utils/aes.js";
export default {
  data() {
    return {
      title: "Hello",
      items: ["需求方信息", "项目信息"],
      current: 0,
      detail: {},
	  formatPhone: '',
	  formatContactPhone: '',
    };
  },
  onLoad(e) {
    console.log(e);

    let data = JSON.parse(e.data);
    this.getDetail(data.id);
  },
  methods: {
    async getDetail(e) {
      let res = await demandProject.getDetail({
        id: e,
      });
      console.log(res);
      const fbdata = res.data.publishTime;
      this.detail = res.data;
	  this.formatPhone = decryptPhone(this.detail.phoneNumber)
	  this.formatContactPhone = decryptPhone(this.detail.contactPhoneNumber)
    },
    supply(e) {
      uni.navigateTo({
        url: "/pages/" + e + "/" + e,
      });
    },
    onClickItem(e) {
      if (this.current != e) {
        this.current = e;
      }
    },
  },
};
</script>

<style scoped lang="less">
.project-list {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;

  .project-info {
    width: 92%;
    margin-top: 20rpx;
    margin-bottom: 20rpx;
    display: flex;

    .info-left {
      image {
        width: 220rpx;
        height: 300rpx;
        border-radius: 10rpx;
      }
    }

    .info-right {
      margin-left: 8rpx;
      display: flex;
      justify-content: space-around;
      flex-direction: column;

      .project-detail {
        font-size: 28rpx;
        color: #303030;
      }
    }
  }
}

.card {
  width: 100%;
}

.test-rich {
  width: 96%;
  ::v-deep img {
    max-width: 100%;
  }
}

.left {
  width: 35%;
  float: left;
  font-size: 14px;
  font-family: PingFang-SC-Medium, PingFang-SC;
  font-weight: 500;
  color: #8d8d8d;
  line-height: 20px;
}

.right {
  width: 60%;
  float: right;
  font-size: 15px;
  font-family: PingFang-SC-Medium, PingFang-SC;
  font-weight: 500;
  color: #000000;
  line-height: 21px;
}
</style>
